<template>
	<view>
		<u-navbar title="详情" autoBack :placeholder="false" :bgColor="'rgba(255,255,255,'+opc+')'"
			:leftIconColor="!opc?'#fff':'#000'" :titleStyle="{color:!opc?'#fff':'#000'}"></u-navbar>
		<view class="">
			<u-swiper :list="list1" height="779rpx" indicator indicatorMode='dot' indicatorActiveColor='#3fd574'
				indicatorInactiveColor='#E6E6E6'></u-swiper>
			<view class="info">
				<view class="u-flex u-flex-y-center u-flex-between" style="height: 80rpx;">
					<view class="info__price">
						9.9
					</view>
					<view class="info__oldprice">
						￥11.9
					</view>
					<view class="info__t">
						近7天内低价
					</view>
				</view>
				<view class="u-flex u-flex-y-center">
					<view class="info__tag">
						精选
					</view>
					<view class="info__name">
						巨峰葡萄500g
					</view>
				</view>
				<view class="info__content">
					果皮一撕就开，轻松嗉出整颗果，一口便咬到了整个秋天的清甜。葡萄比较娇嫩，运输中可能会出现掉珠的情况，不影响食用。
				</view>
				<view class="u-flex u-flex-y-center">
					<view class="info__tags" v-for="(item,index) in tlist" :key="index">
						{{item}}
					</view>
				</view>
				<view class="u-flex u-flex-y-center" style="margin-top: 34rpx;">
					<view class="u-flex u-flex-y-center" style="width: 25%;" v-for="(item,index) in mslist" :key="index">
						<view class="info__ms">
							<image src="/static/goods/g.png" class="info__ms__icon" mode=""></image>
							{{item}}
						</view>
						<view class="info__line" v-if="index!=mslist.length-1">
							
						</view>
					</view>
				</view>
			</view>
			<u-gap height="22rpx" bgColor="#FAF9F9"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opc: 0,
				list1: [
					'/static/goods/b0.png',
					'/static/goods/b0.png',
					'/static/goods/b0.png',
					'/static/goods/b0.png',
				],
				tlist:[
					'新疆直采','到手即食','甜香四溢','细腻'
				],
				mslist:[
					'送货到家','坏了包赔','缺货包退','缺重补差价'
				]
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.opc = 1
			} else {
				this.opc = 0
			}
		}
	}
</script>

<style lang="scss">
.info{
	padding: 0 16rpx 33rpx 26rpx;
	&__price{
		font-family: DINNextLTPro;
		font-weight: bold;
		font-size: 48rpx;
		color: #FF4D30;
		line-height: 48rpx;
		&::before{
			content: "￥";
			font-size: 28rpx;
			
		}
	}
	&__oldprice{
		font-family: PingFang;
		font-weight: 500;
		font-size: 22rpx;
		color: #919191;
		line-height: 22rpx;
		text-decoration-line: line-through;
		margin-left: 8rpx;
	}
	&__t{
		font-family: PingFang;
		font-weight: 500;
		font-size: 20rpx;
		color: #FF4D30;
		line-height: 20rpx;
		flex: 1;
		text-align: right;
	}
	&__tag{
		width: 64rpx;
		height: 32rpx;
		background: #3FD574;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 24rpx;
	}
	&__name{
		font-family: PingFang;
		font-weight: 800;
		font-size: 36rpx;
		color: #181818;
		line-height: 36rpx;
		margin-left: 11rpx;
	}
	&__content{
		font-family: PingFang;
		font-weight: 500;
		font-size: 24rpx;
		color: #828282;
		line-height: 36rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	&__tags{
		padding: 0 10rpx;
		background: #FFF8F5;
		border-radius: 8rpx;
		border: 1rpx solid #F7E3DA;
		font-family: PingFang;
		font-weight: 800;
		font-size: 28rpx;
		color: #A55A36;
		line-height: 57rpx;
		margin-right: 7rpx;
		
	}
	&__ms{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang;
		font-weight: bold;
		font-size: 22rpx;
		color: #9A9A9A;
		line-height: 22rpx;
		&__icon{
			width: 23rpx;
			height: 23rpx;
			margin-right: 8rpx;
		}
	}
	&__line{
		width: 2rpx;
		height: 17rpx;
		background-color: #e1e1e1;
	}
}
</style>